﻿
@{
    Layout = "~/Views/Shared/_TopMenu.cshtml";
    ViewBag.Title = "长月甜品-首页";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <script src="~/Scripts/jquery-3.4.1.min.js"></script>
</head>
<body>

    <div id="aps">
        <!--================轮播图 =================-->
        <section class="main_slider_area">
            <div>
                <!--<ul>
            <li data-index="rs-1587" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="~/static/img/home-slider/slider-1.jpg" data-rotate="0" data-saveperformance="off" data-title="Creative" data-param1="01" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">-->
                <!-- MAIN IMAGE -->
                <!--<img src="~/static/img/content.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="5" class="rev-slidebg" data-no-retina>
            </li>
            <li data-index="rs-1588" data-transition="fade" data-slotamount="default" data-hideafterloop="0" data-hideslideonmobile="off" data-easein="default" data-easeout="default" data-masterspeed="300" data-thumb="~/static/img/home-slider/slider-2.jpg" data-rotate="0" data-saveperformance="off" data-title="Creative" data-param1="01" data-param2="" data-param3="" data-param4="" data-param5="" data-param6="" data-param7="" data-param8="" data-param9="" data-param10="" data-description="">-->
                <!-- MAIN IMAGE -->
                <!--<img src="~/static/img/home-slider/slider-2.jpg" alt="" data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat" data-bgparallax="5" class="rev-slidebg" data-no-retina>
                </li>
            </ul>-->
                <div style="border: 25px solid white; width: 100%;display:flex; justify-content:center;">
                    <video autoplay muted loop style="margin-top:-50px;width:100%;">
                        <source src="~/static/img/video/shoow.mp4" type="video/mp4">
                    </video>
                </div>
            </div>
        </section>
        <!--================店铺介绍、推荐=================-->
        <section class="welcome_bakery_area">
            <div class="container">
                <div class="welcome_bakery_inner p_100">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="main_title">
                                <h2 style="float: right; font-family: 'Playfair Display', serif;color:black;">长月&甜品</h2>
                                <p>
                                    尝在口中甜在心里，专注健康我们秉承无添加，原生态的健康烘焙理念，采用传统结合现代的烘焙工艺。坚持用最天然、最原始、最简单的原材料来制作高品质的新一代健康烘焙食品，用心烘焙。
                                    用“心”制作每一份甜蜜，品味甜蜜生活，感受幸福味道，心得烘焙的蛋糕、用心烘焙的蛋糕做最健康、最放心的食品。
                                    我们始终把健康、营养放第一位，坚持用最简单最原生态的食材搭配，传统的手工技艺来制造美味的烘焙食品，希望能带给您不一样的烘焙食品，真诚期待您的品尝。
                                </p>
                            </div>
                            <div class="welcome_left_text">
                                <p>
                                    为爱人送上一份甜蜜吧！为亲人送上一份温暖吧！为朋友送上一份惊喜吧！为孩子送上一份喜悦吧!
                                </p>
                                <a class="pink_btn" href="/Cake/About" style="margin-bottom:15px;box-shadow:1px 2px 3px rgb(144 144 144 / 0.48)">了解长月甜品</a>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="welcome_img">
                                <img class="img-fluid" src="~/static/img/bsf.jpg" alt="">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="cake_feature_inner" style="margin-top:20px;">
                    <div class="main_title">
                        <h2 style="color:black;font-weight:bold;">店铺推荐</h2>
                        <h5>热销商品</h5>
                    </div>
                 
                    <div style="display:flex; justify-content:space-evenly" class="cake_feature_tj">
                        <div class="item">
                            <div class="cake_feature_item">
                                <a :href="GotoDetail(this.GetHotCake[0].pid)">
                                    <div class="cake_img">
                                        <img :src="Baseimg +GetHotCake[0].pimg" alt="" width="220" height="200">
                                    </div>
                                </a>
                                <div class="cake_text">
                                    <h4><span>￥</span>{{this.GetHotCake[0].pprice}}</h4>
                                    <h3>{{this.GetHotCake[0].pname}}</h3>
                                    <a class="pest_btn" style="color: black" v-on:click="AddCartInfo1(this.GetHotCake[0].pid)">加入购物车</a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="cake_feature_item">
                                <a :href="GotoDetail(this.GetHotCake[1].pid)">
                                    <div class="cake_img">
                                        <img :src="Baseimg+this.GetHotCake[1].pimg" alt="" width="220" height="200">
                                    </div>
                                </a>
                                <div class="cake_text">
                                    <h4><span>￥</span>{{this.GetHotCake[1].pprice}}</h4>
                                    <h3>{{this.GetHotCake[1].pname}}</h3>
                                    <a class="pest_btn" style="color:black" v-on:click="AddCartInfo1(this.GetHotCake[1].pid)">加入购物车</a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="cake_feature_item">
                                <a :href="GotoDetail(this.GetHotCake[2].pid)">
                                    <div class="cake_img">
                                        <img :src="Baseimg+this.GetHotCake[2].pimg" alt="" width="220" height="200">
                                    </div>
                                </a>
                                <div class="cake_text">
                                    <h4><span>￥</span>{{this.GetHotCake[2].pprice}}</h4>
                                    <h3>{{this.GetHotCake[2].pname}}</h3>
                                    <a class="pest_btn" style="color: black" v-on:click="AddCartInfo1(this.GetHotCake[2].pid)">加入购物车</a>
                                </div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="cake_feature_item">
                                <a :href="GotoDetail(this.GetHotCake[3].pid)">
                                    <div class="cake_img">
                                        <img :src="Baseimg+this.GetHotCake[3].pimg" alt="" width="220" height="200">
                                    </div>
                                </a>
                                <div class="cake_text">
                                    <h4><span>￥</span>{{this.GetHotCake[3].pprice}}</h4>
                                    <h3>{{this.GetHotCake[3].pname}}</h3>
                                    <a class="pest_btn" style="color: black" v-on:click="AddCartInfo1(this.GetHotCake[3].pid)">加入购物车</a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section>

        <!--================Special Recipe Area =================-->
        <section class="special_recipe_area" style="width:100%;height:100%;padding:0;">
            <div class="container" style="width: 100%;height: 100%; margin: 0;padding:0;">
                <div class="special_recipe_slider owl-carousel" style="width: 100%; height: 100%; margin: 0; padding: 0; backdrop-filter: blur(15px)">
                    <div class="item" style="background:rgb(255 255 255 /0.5);color:black!important;" >
                        <div class="media">
                            <div class="d-flex">
                                <img src="~/static/img/png/recipe-2.png" height="304" width="309" />
                            </div>
                            <div class="media-body">
                                <h4>冰淇淋蛋糕（纸杯）</h4>
                                <p>原料主要包括软冰淇淋粉或者硬冰淇淋，通过冰淇淋机制作冰淇淋，然后进行冷藏造型和添加装饰物，制作而成。主要原料包括：奶油、炼乳、芒果、冰淇淋</p>
                                <a class="w_view_btn" :href="GotoDetail(53)">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="media">
                            <div class="d-flex">
                                <img src="~/static/img/png/recipe-3.png" height="304" width="309" />
                            </div>
                            <div class="media-body">
                                <h4>蓝莓冰淇淋蛋糕（纸杯）</h4>
                                <p>
                                    以蓝莓为辅料，蛋糕为主体的冰淇淋。
                                    既好吃有营养又便于制作，材料要求简单，制作过程易学。主要原料包括：蓝莓、奶油、炼乳、芒果、冰淇淋
                                </p>
                                <a class="w_view_btn" :href="GotoDetail(54)">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="media">
                            <div class="d-flex">
                                <img src="~/static/img/png/recipe-4.png" height="304" width="309" />
                            </div>
                            <div class="media-body">
                                <h4>小爱心蛋糕（纸杯）</h4>
                                <p>原料主要包括软冰淇淋粉或者硬冰淇淋，通过冰淇淋机制作冰淇淋，然后进行冷藏造型和添加装饰物，制作而成。主要原料包括：奶油、炼乳、芒果、冰淇淋</p>
                                <a class="w_view_btn" :href="GotoDetail(55)">查看详情</a>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="media">
                            <div class="d-flex">
                                <img src="~/static/img/png/recipe-1.png" height="304" width="309" />
                            </div>
                            <div class="media-body">
                                <h4>蔓越莓蛋糕（纸杯）</h4>
                                <p>原料主要包括软冰淇淋粉或者硬冰淇淋，通过冰淇淋机制作冰淇淋，然后进行冷藏造型和添加装饰物，制作而成。主要原料包括：奶油、炼乳、芒果、冰淇淋</p>
                                <a class="w_view_btn" :href="GotoDetail(56)">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--================End Special Recipe Area =================-->

        <section class="our_chef_area p_100">
            <div class="container">
                <div class="main_title">
                    <h2 style="color:#eacda3">我们的团队</h2>
                    <p>一个完美的团队</p>
                </div>
                <div class="row our_chef_inner">
                    <div class="col-lg-3">

                        <div class="chef_item">
                            <div class="chef_img">
                                <img class="img-fluid" src="~/static/img/chef/chef-1.jpg" alt="">
                            </div>
                            <a href="#"><h4>唐某某</h4></a>
                            <h5>团队主力</h5>
                        </div>
                       
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="chef_item">
                            <div class="chef_img">
                                <img class="img-fluid" src="~/static/img/chef/chef-4.jpg" alt="">
                            </div>
                            <a href="#"><h4>唐某某</h4></a>
                            <h5>团队主力</h5>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="chef_item">
                            <div class="chef_img">
                                <img class="img-fluid" src="~/static/img/chef/chef-2.jpg" alt="">
                            </div>
                            <a href="#"><h4>龚某某</h4></a>
                            <h5>团队想法</h5>
                        </div>
                    </div>
                    <div class="col-lg-3 col-6">
                        <div class="chef_item">
                            <div class="chef_img">
                                <img class="img-fluid" src="~/static/img/chef/chef-3.jpg" alt="">
                            </div>
                            <a href="#"><h4>张某某</h4></a>
                            <h5>团队销售</h5>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>
    <script type="text/javascript">
       
        $(function () {
            $(".main_menu_area .container ul li").eq(0).children().addClass("span")
        })
    </script>
    <script>
        var Main = {
            data() {
                return {
                    GetHotCake: [
                        pid = "",
                        pprice = "",
                        pname = "",
                        pimg = "",
                    ],

                    Baseimg: "../../static/img/index/",
                }
            },
            created() {
                this.ShowHotCake();
            },
            mounted() {
                this.ShowHotCake();

            },
            methods: {
                async ShowHotCake() {
                    const { data: res } = await axios.get("/Cake/ShowHotCake");
                    console.log(res);
                    this.GetHotCake = res;
                    console.log(this.GetHotCake[0])
                },
                //添加购物车
                async AddCartInfo1(val) {
                    console.log(val);
                    const { data: ress } = await axios.get("/Cake/SelectUserInfo");
                    console.log(ress);
                    if (ress == "无") {
                        this.$message.warning('您还未登录！请前往登录！！');
                        return false;
                    }
                    const { data: res } = await axios.post("/Cake/SelectCart", { pid: val });
                    console.log(res);
                    if (res == "有") {
                        this.$message.warning('购物车已有商品！');
                        return false;
                    } else {
                        const { data: res } = await axios.post("/Cake/AddCart1", { pid: val });
                        if (res.status == "200") {
                            this.$message.success('添加成功');
                        }
                    }
                },
                GotoDetail: function (val) {
                    //链接定向
                    return '/Cake/Details?id=' + val
                },

            }
        }

        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#aps')
    </script>

</body>
</html>
